<template>
  <div class="flex flex-wrap gap-4">
    <el-card style="font-size: 15px;font-weight: bold;margin-bottom: 10px" shadow="always">
      <span style="color: #535bf2">|</span> 轮播表
    </el-card>
  </div>
  <div class="CarouselFigureList" style="padding-top: 30px">
    <el-button type="primary" @click="showAddDialog">新增信息</el-button>
    <el-table :data="CarouselFigureList" style="width: auto" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" show-overflow-tooltip/>
      <el-table-column type="index" label="序号" width="200" show-overflow-tooltip/>
      <el-table-column prop="id" label="ID" width="200" show-overflow-tooltip/>
      <!--      <el-table-column prop="url" label="url" width="200" show-overflow-tooltip/>-->
      <el-table-column label="图片地址" width="300">
        <template #default="scope">
          <el-image
              style="width: auto; height: 100px"
              :src="scope.row.url"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="sequenceNum" label="数量" width="200" show-overflow-tooltip/>
      <el-table-column label="操作" width="230">
        <template #default="scope">
          <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
          <el-button type="success" @click="editView(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="delCarouselFigure(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="justify-content: center;margin-top: 10px" background layout="prev, pager,next"
                   :page-size="pageSize" :total="total" @current-change="toPage" @prev-click="toPage"
                   @next-click="toPage"/>

    <el-dialog v-model="dialogVisible" width="1000px" :title="carouselFigureQuery.id !=null ? '销售详情' : '新增信息'"
               draggable="true" center>
      <el-form ref="detailForm" :model="carouselFigureQuery" label-width="auto" style="max-width: 800px">
        <el-form-item v-if="carouselFigureQuery.id !=null" label="ID:">
          <span class="detail">{{ carouselFigureQuery.id }}</span>
        </el-form-item>
        <el-form-item label="添加图片">
<!--          <el-input v-if="carouselFigureQuery.id==null" v-model="carouselFigureQuery.url"/>-->
          <el-upload
              v-if="carouselFigureQuery.id==null"
              v-model="carouselFigureQuery.url"
              list-type="picture-card"
              action="http://localhost:8080/upload"
              multiple
              :limit="3"
              :on-success="addHandleAvatarSuccess"
          >
          </el-upload>

          <span class="detail" v-else>
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="carouselFigureQuery.url"
                    ></el-image>
        </span>
        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-if="carouselFigureQuery.id==null" v-model="carouselFigureQuery.sequenceNum"/>

          <span class="detail" v-else>{{ carouselFigureQuery.sequenceNum }}</span>

          <el-button v-else type="primary" plain>{{ carouselFigureQuery.sequenceNum }}</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-if="carouselFigureQuery.id==null" type="primary" @click="addCarouselFigure">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="editDialogVisible" width="1000px" :title="dialogTitle" draggable="true" center>
      <el-form ref="detailForm" :model="editCarouselFigureQuery" label-width="auto" style="max-width: 800px">
        <el-form-item label="ID:">
          <span class="detail">{{ editCarouselFigureQuery.id }}</span>
        </el-form-item>
<!--        <el-form-item label="地址:">-->
<!--          <span class="detail" >-->
<!--                    <el-image-->
<!--                        style="width: 100px; height: 100px"-->
<!--                        :src="editCarouselFigureQuery.url"-->
<!--                    ></el-image>-->
<!--        </span>-->
<!--        </el-form-item>-->
        <el-form-item label="地址:">

          <el-upload
              v-model="editCarouselFigureQuery.url"
              list-type="picture-card"
              action="http://localhost:8080/upload"
              multiple
              :limit="3"
              :on-success="editHandleAvatarSuccess"
          >
            <el-image
                style="width: 100px; height: 100px"
                :src="editCarouselFigureQuery.url"
            ></el-image>

          </el-upload>
        </el-form-item>

        <el-form-item label="数量:">
          <el-input v-model="editCarouselFigureQuery.sequenceNum"></el-input>
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editCarouselFigureSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

export default {
  name: "CarouselFigureView",
  inject: ['reload'],
  data() {
    return {
      CarouselFigureList: [],
      dialogVisible: false,
      carouselFigureQuery: {},
      pageSize: 0,
      total: 0,
      CarouselFigureIdArray: [],
      dialogTitle: '',
      editDialogVisible: false,
      editCarouselFigureQuery: {}
    }
  },
  mounted() {
    this.loadCarouselFigureList(1);
  },
  methods: {
    toPage(current) {
      this.loadCarouselFigureList(current);
    },
    handleSelectionChange(CarouselFigureItemArray) {
      this.CarouselFigureIdArray = [];
      CarouselFigureItemArray.forEach((CarouselFigure) => {
        this.CarouselFigureIdArray.push(CarouselFigure.id);
      });
    },
    loadCarouselFigureList(current) {
      doGet("/admin/carouselFigure", {
        current: current
      }).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.CarouselFigureList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      });
    },
    view(id) {
      doGet("/admin/carouselFigure/" +id , {
        id: id
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.carouselFigureQuery = resp.data.data; // 设置当前行的数据
          this.dialogVisible = true; // 显示对话框
        }
      });
    },
    delCarouselFigure(id) {
      messageConfirm("是否删除该销售记录？").then(() => {
        doDelete("/admin/carouselFigure/" +id, {
          id: id
        }).then((resp) => {
          if (resp.data.code === 200) {
            messageTip("删除成功!", "success");
            this.reload();
          }
        });
      });
    },
    showAddDialog() {
      this.carouselFigureQuery.url=''
      this.carouselFigureQuery = {}; // 清空表单
      this.dialogVisible = true;
    },
    addCarouselFigure() {
      doPost("/admin/carouselFigure/save", this.carouselFigureQuery).then((resp) => {
        if (resp.data.code === 200) {
          this.dialogVisible = false
          messageTip("添加成功", "success")
          this.reload()
        } else {
          messageTip("添加失败", "error")
        }
      })
    },
    editView(id) {
      doGet("/admin/carouselFigure/" +id, {
        id: id
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.editCarouselFigureQuery = resp.data.data; // 设置当前行的数据
          this.editDialogVisible = true; // 显示对话框
        }
      });
    },
    editCarouselFigureSubmit() {
      doPut("/admin/carouselFigure", this.editCarouselFigureQuery).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.editDialogVisible = false
          messageTip("修改成功！", "success")
          this.reload()
        }
      })
    },
    addHandleAvatarSuccess(res, file) {
      console.log(res.data) // 图片地址
      this.carouselFigureQuery.url = res.data

    },
    editHandleAvatarSuccess(res, file) {
      console.log(res.data) // 图片地址
      this.editCarouselFigureQuery.url = res.data

    }
  },
};

</script>

<style scoped>
.CarouselFigureList {
  width: auto;
  height: auto;
  background-color: #ffffff;
}

.detail {
  background-color: #f5f7fa;
  width: 100%;
  padding-left: 15px;
}
</style>